<template>
  <TreeTableLayout>
    <template #tree>
      <Tree @query="doQuery" gatewayType="-1"></Tree>
    </template>
    <template #table>
      <RightTableLayout :slotName="['search', 'table', 'pagination']">
        <template #search>
          <Query :columns="columns" @query="doQuery"></Query>
        </template>
        <template #table>
          <el-table :empty-text="i18n.fy.ondata" :data="data.tableData" border v-loading="data.loading"
            :element-loading-text="i18n.fy.loading">
            <el-table-column prop="id" label="ID" width="80" align="center" />
            <el-table-column prop="deviceFid" :label="i18n.fy.父id" align="center" />
            <el-table-column prop="reportedType" :label="i18n.fy.上报类型" width="190" align="center"> </el-table-column>
            <el-table-column prop="eventType" :label="i18n.fy.事件类型" align="center" />
            <el-table-column prop="warningType" :label="i18n.fy.报警类型" align="center" />
            <el-table-column prop="otherContent" :label="i18n.fy.其他内容" />
            <el-table-column prop="needSendMessage" :label="i18n.fy.通知状态" align="center">
              <template #default="scope">
                {{ scope.row.needSendMessage == "1" ? "未处理" : scope.row.needSendMessage == "2" ? "不需要处理" : "已处理" }}
              </template>
            </el-table-column>
            <el-table-column prop="createTime" :label="i18n.fy.上报时间" width="180" />
            <el-table-column prop="updateTime" :label="i18n.fy.处理时间" width="180" />
          </el-table>
        </template>
        <template #pagination>
          <el-pagination @size-change="onChanSize" @current-change="onChanPage"
            v-model:current-page="data.queryForm.page" v-model:page-size="data.queryForm.limit" :total="data.total" />
        </template>
      </RightTableLayout>
    </template>
  </TreeTableLayout>
</template>

<script setup>
defineOptions({ name: "WarningList" });
import Query from "@/components/query.vue";
import Tree from "@/components/tree.vue";
import RightTableLayout from "@/views/workbench/components/RightTableLayout.vue";
import TreeTableLayout from "@/views/workbench/components/TreeTableLayout.vue";
import { i18nStore } from "@/pinia/i18n";
const i18n = i18nStore();

let columns = reactive({
  reportedType: { label: i18n.fy.上报类型, queryValue: "" },
  eventType: { label: i18n.fy.事件类型, queryValue: "" },
  warningType: { label: i18n.fy.报警类型, queryValue: "" },
});
let data = reactive({
  queryForm: {
    page: 1,
    limit: 100,
  },
  tableData: [],
  total: 0,
  dialog: false,
  form: {},
  rules: {
    name: [{ required: true, message: "请输入姓名", trigger: "change" }],
    role: [{ required: true, message: "请选择岗位", trigger: "change" }],
  },
});

const onChanSize = (e) => {
  //修改分页数
  data.queryForm.page = 1;
  data.queryForm.limit = e;
  getList();
};
const onChanPage = (e) => {
  //修改分页
  data.queryForm.page = e;
  getList();
};

const getList = (params) => {
  // 获取表格数据
  data.loading = true;
  $axios
    .get("/warningRecord/queryWarningRecordAllList", {
      ...data.queryForm,
      ...params,
      deviceFid: pid.value,
    })
    .then((res) => {
      data.loading = false;
      data.tableData = res.data.data.records;
      data.total = res.data.data.total;
    });
};

let pid = ref("");
const doQuery = (params) => {
  if (params.deviceFid) {
    pid.value = params.deviceFid;
  }
  getList({ ...params, deviceFid: pid.value });
};

onBeforeMount(() => {
  getList({});
});
</script>

<style lang="scss" scoped>
.available1 {
  color: orangered;
}
</style>
